<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
<table>
  <tr>
    <td>用户名：</td>
    <td><input type="text" id="username"></td>
  </tr>
  <tr>
    <td>密码：</td>
    <td><input type="text" id="password"></td>
  </tr>
</table>
<button id="loginButton">登录</button>
</body>
<script>
    $(function (){
        $("#loginButton").click(function (){
            let username = $("#username").val();
            let password = $("#password").val();
            if (username==""||password==""){
                alert("请输入完整的用户名或密码！")
            }
            else {
                $.ajax({                    // 标准化模板，不用死记
                    // jquery中的任何属性名称，不能错误，并且一定区分大小写，所以建议在开发中，尽可能使用ctrl+c复制在修改
                    url: "/login",           // 请求路径
                    type: "post",            // 请求的方式，不区分大小写
                    async: true,             // 是否异步，true是默认值，false为同步请求
                    cache: false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                    datatype: "html",        // 返回类型，text文本、html页面、json数据
                    data: {                  // 传递给后台参数名和参数值
                        username: username,  // key和value是可以相同名称，但是它们的意义是不一样，值的名称是代表变量的值
                        password: password
                    },
                    success: function (response) {        // 如果后端响应成功，则会返回所有数据给到response对象中
                        if (response==="success"){
                            alert("恭喜您！登录成功！");
                            window.location.href="success.html";
                        }
                        else if(response==="error"){
                            alert("对不起！用户名或者密码错误!");
                            window.location.href="error.html";
                        }
                        else {
                            alert(response);
                        }
                    },
                    error: function () {          // 如果请求失败，则会执行error函数
                    }
                });
            }
        });
    });
</script>
</html>